<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="../css/mui.css" />
    <link rel="stylesheet" href="../css/aui.css" />
    <link rel="stylesheet" href="../css/public-head.css" />
    <style>
        body {}
        /*头部样式*/

        .public-head>div:nth-child(1) {
            justify-content: flex-start;
            flex: 3;
            display: flex;
            align-items: center;
        }

        .close {
            overflow: hidden;
            display: flex;
        }

        .close img {
            width: 15px;
            height: 15px;
            margin-left: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .public-head>div:nth-child(3) {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .public-head>div:nth-child(3) a {
            font-size: 26px;
        }
        /*头部样式结束*/

        .Zhangice {
            width: 100%;
            height: 100%;
        }

        .inv-1 {
            width: 100%;
        }

        .inv-1>div {
            position: relative;
            width: 100%;
            display: flex;
        }

        .inv-1>div>img {
            position: absolute;
            width: 100%;
            height: 4.9rem;
            margin-top: 10px;
            padding-right: 65px;
        }
        /*顶部文字*/

        .p {
            position: absolute;
            padding-left: 56%;
            padding-top: 0.4rem;
        }

        .p1 {
            font-size: 0.8rem;
            font-weight: 800;
            color: #1B1B1B;
        }

        .p2 {
            font-size: 0.5rem;
            font-weight: 800;
            color: #1B1B1B;
        }

        .p3 {
            font-size: 0.56rem;
            font-size: 700;
            color: #1769FA;
        }

        .d {
            padding-top: 209px;
        }

        .d1 {
            flex: 4;
            width: 100px;
            height: 1px;
            padding: 0px;
            background-color: #EEEEEE;
            overflow: hidden;
            /*margin-left: 15px;*/
            margin: 15px auto;
            margin-left: 15px;
            margin-right: 5px;
        }

        .d3 {
            flex: 4;
            float: left;
            width: 100px;
            height: 1px;
            padding: 0px;
            background-color: #EEEEEE;
            overflow: hidden;
            /*margin-left: 15px;*/
            margin: 15px auto;
            margin-right: 15px;
            margin-left: 5px;
        }

        .d2 {
            flex: 4;
            position: relative;
            font-size: 12px;
            font-weight: 600;
            color: #626262;
            padding-top: 5px;
            margin: 0 auto;
            text-align: center;
        }
        /*优惠券外层*/

        .preferential {
            width: 100%;
            padding-top: 20px;
        }
        /*优惠券*/

        .img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 2.56rem;
        }

        .img>div {
            display: flex;
            width: 100%;
            height: 1.86rem;
            background: url(../image/icon/kapianbeij@2x.png);
            flex-direction: row;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .img>div>img {
            width: 345px;
            height: 70px;
            margin-top: 13px;
            margin-left: 15px;
            margin-right: 15px;
        }
        /*优惠券内文字布局*/

        .d-1 {
            flex: 5;
            font-size: 14px;
            color: #2161D3;
            font-weight: 500;
            padding-left: 27px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .d-1>span {
            font-size: 36px;
            font-weight: 700;
        }

        .d-2 {
            flex: 10;
        }

        .d-2>p {
            font-size: 10px;
            padding-right: 20px;
        }

        .span-1 {
            font-size: 14px;
            color: #434343;
            font-weight: 700;
        }

        .span-2 {
            font-size: 8px;
            color: #313131;
        }
        /*优惠券以放入...*/

        .text {
            font-size: 14px;
            color: #1B1B1B;
            font-weight: 700;
            width: 100%;
            text-align: center;
            padding-top: 0.61rem;
        }
        /*立即使用按钮*/

        .make {
            padding-left: 50px;
            padding-right: 50px;
            text-align: center;
            padding-top: 0.61rem;
        }

        .make button {
            font-size: 15px;
        }

        button,
        .aui-btn {
            position: relative;
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 400;
            color: white;
            font-family: inherit;
            text-decoration: none;
            text-align: center;
            margin: 0;
            background: #0A5AFA;
            padding: 0 0.6rem;
            height: 1.5rem;
            width: 100%;
            line-height: 1.5rem;
            border-radius: 50px;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="Zhangice">
        <div class="inv-1">
            <div>
                <img src="../image/icon/chahua2@2x.png" />
                <div class="p">
                    <p class="p1">车车侠</p>
                    <p class="p2">注册即可享受</p>
                    <p class="p3">代金券10元优惠</p>
                </div>
            </div>
            <div class="d">
                <div class="d1"></div>
                <div class="d2"><span>您已获得优惠券</span></div>
                <div class="d3"></div>
            </div>
        </div>
        <div class="preferential">
            <div class="img">
                <div>
                    <div class="d-1">￥<span>5</span></div>
                    <div class="d-2">
                        <span class="span-1">洗车优惠券</span>
                        <p>随心所洗，高压水枪，蜡水泡沫，车内吸尘臭氧消毒</p>
                        <span class="span-2">30天后过期</span>
                    </div>
                </div>
            </div>
            <div class="img">
                <div>
                    <div class="d-1">￥<span>5</span></div>
                    <div class="d-2">
                        <span class="span-1">洗车优惠券</span>
                        <p>随心所洗，高压水枪，蜡水泡沫，车内吸尘臭氧消毒</p>
                        <span class="span-2">30天后过期</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="text">优惠券已放入账号:188******778</div>
        <div class="make"><button>立即使用</button></div>


    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript">
    headInner({
        title: "邀请页面",
        //headleft
        headl: '<a href="#" style="color:white" class="close"><img src="../image/icon/dX@2x.png" alt="" tapmode onclick="api.closeWin()"/></a>',
        //headright
        headr: '<a style="color:white">...</a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })
    apiready = function() {

    };
    apiready = function() {

    };
</script>

</html>
